@import (reference) 'config';
@import (reference) 'icons';
@import (reference) '../../../app/less/typography';

@cell-height: 64px;
@responsive-cell-height: auto;

.search {
  &-wrapper {
    height: 100%;
    width: 100%;
    display: inline-block;
  }

  &-input {
    background: @input-search-icon 8px center no-repeat @color-white;
    height: 100%;
    width: 100%;
    padding-left: 31px;
    cursor: pointer;
    color: @color-disabled-900;
    transition: .3s;
    border: 1px solid transparent;
    font-size: @font-size-caption-2;

    &:focus {
      border-color: @color-submit-300;
      cursor: default;
    }
  }
}

.portfolio {
  .smart-table {
    .search-input {
      width: 36px;
      border-radius: @border-radius;
      margin-right: 10px;
      text-indent: -999px;
      border-color: @color-basic-200;
      z-index: 1;
      background-position: 10px center;
      padding-left: 35px;
      .footnote-1();

      &:focus {
        width: 200px;
        text-indent: 0;
        border-color: @color-submit-300;
      }

      &.not-empty {
        border-color: @color-submit-300;
      }
    }
  }
}

.dex {
  .smart-table {
    .search-input {
      &:focus {
        border-color: transparent;
      }
    }
  }
}

.smart-table {
  display: block;
  height: 100%;
  position: relative;
  overflow: hidden;

  &__w-table {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  &__w-thead {
    width: 100%;
    z-index: 1;

    .smart-table {
      &__search-container {
        position: relative;
      }
      &__row {
        display: flex;
        width: 100%;
        align-items: center;
      }

      &__cell {
        padding: 0 10px;

        .sort-by {
          cursor: pointer;
          display: inline-block;

          &::after {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-left: 5px;
            margin-top: -1px;
            content: '';
            background: @sorting-icon center center no-repeat;
            vertical-align: middle;
            transform: rotate(0deg);
          }
        }

        &.asc .sort-by::after,
        &.desc .sort-by::after {
          background-image: @sorting-active-icon;
        }

        &.desc {
          .sort-by {
            &::after {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }

  &__w-tbody {
    height: 100%;
    display: block;
    overflow: auto;
    position: relative;
    z-index: 2;

    .smart-table {
      &__row {
        display: flex;
        width: 100%;
        align-items: center;
        position: relative;
        background: @color-white;
        transition: all 0.3s;
      }

      &__cell {
        padding: 0 10px;
      }
    }
  }
}

.smart-table {
  &__mode-large {
    border-radius: @border-radius;

    .smart-table__w-table {
      color: @color-basic-700;
      font-size: 15px;
      background: @color-white;
    }

    .smart-table__w-thead {

      .smart-table__row {
        min-width: 768px;
        overflow-x: auto;
        background: @color-white;
      }

      .smart-table__cell {
        border-bottom: 1px solid @color-basic-100;
        width: 100%;

        &:first-child {
          .cell {
            justify-content: flex-start;
          }
        }

        .cell {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          color: @color-basic-500;
          height: @cell-height;
          white-space: nowrap;
          .footnote-1();
        }
      }

      .smart-table__search-container {
        position: absolute;
        left: 20px;
        top: 13px;
        z-index: 1;
        height: 36px;
      }
    }

    .smart-table__w-tbody {
      .smart-table__cell {
        border-bottom: 1px solid @color-basic-50;
        padding: 0 10px;
        width: 100%;
        .footnote-1();

        .cell {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          white-space: nowrap;
        }

        .cell-header {
          display: none;
        }

        &:first-child {
          .cell {
            justify-content: flex-start;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .smart-table {
    &__mode-large {
      border: 0 none;
      border-radius: 0;
      box-shadow: none;

      .smart-table__w-table {
        background: none transparent;
      }

      .smart-table__w-thead {
        display: none;
      }

      .smart-table__w-tbody {

        .smart-table__row {
          width: 100%;
          flex-direction: column;
          position: relative;
          background: @color-white;
          border-radius: @border-radius;
          box-shadow: @shadow-type-1;
          padding: 20px 0 40px;
          transition: .3s;
          min-width: calc(100% ~'- 20px');

          &:first-child {
            margin-top: 0;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }

        .smart-table__cell {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px 0 10px;
          border: 0 none;
        }
      }
    }
  }
}
